<template>
  <div class="make-suggestion">
    <el-card>
      <p style="color: #666; font-size: 14px; line-height: 1.5">
        同学你好！
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我们一直在关心你的学习情况，致力于为你提供更优质的学习体验，使你获得更好的学习效果。如果你发现老师存在态度恶劣、应付讲课、引导学员做出不实评价、聊闲天等任何影响你正常学习的行为；如果你认为教学的环境、校区的服务给你带来了不佳的感受；如果你对TLIAS系统等产品的使用有任何意见或建议；不论你在学习过程中遇到何种问题，都可以在这里进行实名/匿名反馈，我们会及时有效地为你解决。
        <br />
        祝你生活愉快，学业有成！
      </p>
      <p class="tips">
        温馨提示：关于某道试题的问题，请直接点击该题旁边所对应的“反馈”，以便快速定位并有效处理。
      </p>
      <el-form :model="suggestionForm">
        <el-form-item>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="平台" name="first"> </el-tab-pane>
            <el-tab-pane label="教学" name="second"> </el-tab-pane>
            <el-tab-pane label="校区" name="fourth"> </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <div class="content">
          <div v-bind:class="{ check: ischeck }" style="margin-bottom: 20px">
            <el-checkbox v-model="checkbox">平台bug</el-checkbox>
            <el-checkbox v-model="checkbox">平台建议</el-checkbox>
            <el-checkbox v-model="checkbox">其他</el-checkbox>
          </div>
          <quill-editor
            v-model="content"
            :options="editorOption"
          ></quill-editor>
          <el-upload
            style="margin-top: 20px"
            action="#"
            :limit="1"
            :file-list="fileList"
            :show-file-list="true"
            :auto-upload="false"
          >
            <el-button class="btnupload" size="small">点击上传</el-button>
            <span style="color: #666; font-size: 12px; margin-left: 7px"
              >支持png、jpg、doc、docx、pdf、xls、xlsx、ppt格式文件</span
            >
          </el-upload>
        </div>
        <el-row
          type="flex"
          justify="end"
          align="middle"
          class="footer"
          style="margin-top: 20px"
        >
          <el-checkbox v-model="anonymous">匿名反馈</el-checkbox>
          <el-button style="margin-left: 20px" size="small" type="primary"
            >提交反馈</el-button
          >
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MakeSuggestion',
  data () {
    return {
      activeName: 'first',
      fileList: [],
      checkbox: false,
      ischeck: false,
      anonymous: false,
      editorOption: {
        placeholder: '请输入内容'
      },
      suggestionForm: {
        id: '',
        suggestionDate: '',
        suggestionTpye: '',
        problemType: '',
        subject: [],
        suggestionContent: '',
        replyState: '',
        processState: '',
        satisfaction: '',
        operation: ''
      },
      content: '' // 富文本默认内容
    }
  },
  props: {},
  components: {},
  created () {},
  mounted () {},
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
      if (tab.index === '1' || tab.index === '2') {
        this.ischeck = true
      } else {
        this.ischeck = false
      }
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped lang="scss">
.tips {
  display: flex;
  align-items: center;
  background-color: #ff494214;
  border-radius: 4px;
  height: 30px;
  color: #f36509;
  padding-left: 10px;
  margin: 10px 0 20px;
  font-size: 14px;
}
.el-tabs {
  ::v-deep.el-tabs__nav {
    height: 32px;
    border: none;
    #tab-first,
    #tab-second,
    #tab-fourth {
      margin-right: 10px;
      border-radius: 5px 5px 0 0;
      background-color: #e9f2ff;
      padding: 0 18px;
    }
    .el-tabs__item.is-active {
      background-color: #247ffc !important;
      color: #fff;
    }
  }
  .el-tabs__header {
    margin: 0px;
  }
}
.content {
  border: 1px solid #e5e5e5;
  padding: 20px;
}
.btnupload {
  background-color: #d3e5fe;
  color: #247ffc;
}
::v-deep.el-button:focus,
.el-button:hover {
  background-color: #247ffc !important;
  color: #fff;
}
::v-deep.check {
  display: none !important;
}
::v-deep.quill-editor .ql-container {
  height: 173px !important;
}
::v-deep .quill-editor svg{
    width:unset !important;
}
</style>
